<template>
    <fieldset>
        <legend>echarts</legend>
        <div class="container" ref="container"></div>
    </fieldset>
</template>
<style scoped>
.container {
    height: 300px;
}
</style>
<script setup lang="ts">
import * as echarts from "echarts";
import axios from "axios";
import { ref, watchEffect, reactive } from "vue";
import taskPieOption from "../echarts/taskPie"
//使用ref来获取容器元素
//html结构的泛型 HTMLInputElement
const container = ref<HTMLInputElement | null>(null)

//使用ts类型推断定义reactive数据

// [120, 200, 150, 80, 70, 110, 30]

interface y {
    type: string
    name?: string //可选参数
    [key: string]: string | undefined //索引签名
}

let yAxis: y = reactive({ type: 'value' })

let data: Array<number> = reactive([120, 200, 150, 80, 70, 110, 30])

//获取容器

//对echarts做初始化

watchEffect((): void => {
    //初始化
    let myCharts = echarts.init(container.value!)

    //发起异步请求

    axios.get('http://chst.vip/data/tarsk.json')
        .then(res => {
            console.log(res)
            interface da {
                name: string
                value: number
            }
            let data: Array<da> = res.data.data;

            //setOption

            taskPieOption.series[0].data = data;

            myCharts.setOption(taskPieOption)
        })

    // 设置选项
    // myCharts.setOption()
    //展示什么样的表格
}, {
    flush: 'post'
})

</script>